<template>
  <!-- 点击注册 -->
  <div class="register">
    <returnPage></returnPage>
    <div style="margin-top: 20px; margin-bottom: 15px">
      我们将发送验证码到您的手机
    </div>
    <!-- <van-search v-model="value" placeholder="请输入手机号"/>
    <van-button type="primary" size="large"  @click="onRegister" >下一步</van-button> -->
    <van-form @submit="onRegister">
      <van-field
        v-model="value"
        name="value"
        label="请输入手机号"
        placeholder="请输入手机号"
        :rules="[{message: '请输入手机号'}]"
      />
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          submit-on-enter="true"
          >下一步</van-button
        >
      </div>
    </van-form>
    <div class="root">
      <span style="color: #ccc">已有账号?</span
      ><router-link to="/login" style="color: red">登录</router-link>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import request from '../../utils/request'
export default {
  name: 'register',
  components: {},
  data () {
    return {
      value: ''
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {},
  methods: {
    onRegister () {
      // console.log(this.value)
      if (/^1[3456789]\d{9}$/.test(this.value)) {
        request.post('auth/regCaptcha', { mobile: this.value }).then((res) => {
          console.log(res)
        })
        this.$router.push(`/login/registerSubmit/${this.value}`)
      } else {
        Toast('请输入正确的手机号')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.register {
  .root {
    text-align: right;
    margin-top: 20px;
  }
}
</style>
